import React, { useState } from 'react';
import { Fab, Button, Box, IconButton, Icon } from '@mui/material';
import { Delete as DeleteIcon } from '@mui/icons-material';
import DialogBox from './DialogBox';
import Tooltip from './Tooltip';

interface NetPyNEThumbnailProps {
  name: string;
  selected?: boolean;
  isButton?: boolean;
  isCog?: boolean;
  paramPath?: string;
  handleClick?: (name: string, selected: boolean) => void;
  onDelete?: () => void;
  deleteNetParamsObj?: (payload: { paramPath: string; paramName: string }) => void;
}

const NetPyNEThumbnail: React.FC<NetPyNEThumbnailProps> = ({
  name,
  selected = false,
  isButton = false,
  isCog = false,
  paramPath,
  handleClick,
  onDelete,
  deleteNetParamsObj,
}) => {
  const [dialogOpen, setDialogOpen] = useState(false);

  const handleButtonClick = (): void => {
    if (handleClick) {
      handleClick(name, true);
    }
  };

  const handleDialogBox = (actionConfirmed: boolean): void => {
    if (handleClick && actionConfirmed && deleteNetParamsObj && paramPath) {
      deleteNetParamsObj({
        paramPath,
        paramName: name,
      });
      if (onDelete) {
        onDelete();
      }
    }
    setDialogOpen(false);
  };

  const getCommonProps = () => ({
    id: name,
    color: selected ? ('primary' as const) : ('secondary' as const),
    onClick: handleButtonClick,
  });

  let label: string;
  if (name.length > 14) {
    label = `${name.slice(0, 11)}...`;
  } else {
    label = name;
  }

  const props = getCommonProps();

  const HoverActions: React.FC<{ deleteAction: () => void }> = ({ deleteAction }) => (
    <Box
      sx={{
        fontSize: '0.7em',
        zIndex: 1000,
      }}
    >
      <Tooltip title="Delete item" placement="top">
        <IconButton size="small" onClick={deleteAction}>
          <DeleteIcon fontSize="inherit" />
        </IconButton>
      </Tooltip>
    </Box>
  );

  const getCogButton = (labelText: string, isSelected: boolean, others: any) => (
    <IconButton
      className={`gearThumbButton ${isSelected ? 'selectedGearButton' : ''}`}
      {...others}
    >
      <div>
        <span className="gearThumbLabel">{labelText}</span>
        <Icon color="primary" className="gpt-fullgear" />
      </div>
    </IconButton>
  );

  const getRegularButton = (labelText: string, isSelected: boolean, others: any) => (
    <Button
      variant="contained"
      sx={{ borderRadius: '25px', margin: '8px' }}
      className={`rectangularActionButton ${isSelected ? 'selectedRectangularActionButton' : ''}`}
      {...others}
    >
      {labelText}
    </Button>
  );

  const getFabButton = (labelText: string, isSelected: boolean, others: any) => (
    <Fab
      className={`actionButton ${isSelected ? 'selectedActionButton' : ''}`}
      {...others}
      sx={{ borderRadius: '50%' }}
    >
      {labelText}
    </Fab>
  );

  const getButton = () => {
    if (isCog) {
      return getCogButton(label, selected, props);
    }
    if (isButton) {
      return getRegularButton(label, selected, props);
    }
    return getFabButton(label, selected, props);
  };

  return (
    <Box position="relative">
      <Tooltip
        placement="bottom"
        title={<HoverActions deleteAction={() => setDialogOpen(true)} />}
        disableInteractive={false}
      >
        {getButton()}
      </Tooltip>
      <DialogBox
        open={dialogOpen}
        onDialogResponse={handleDialogBox}
        textForDialog={{
          heading: `Delete ${name}`,
          content: `Do you want to remove ${name}?`,
        }}
      />
    </Box>
  );
};

export default NetPyNEThumbnail;

